<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="./js/lib/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $("#first").after().css("content", "000");
    </script>
    <!--[if lt IE 8]>
<script src="IE8.js"></script>
<![endif]-->
    <script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/require.min.js"></script>
	<script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/loader.js"></script>
    <script type="text/javascript" src="/js/require.config.js"></script>
    <script type="text/javascript">
    require(["common", "UI.testing"], function() {
    	require([],function (argument) {
        	window.removeLoader();       	
    	});
    });
    </script>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
</head>

<body>
    <xmp id="jSouperApp">
    <div class="topbar">
        <div class="bar">
            <div class="bar-left">
                <i class="icon-tag"></i>
                <a href="#" class="bar-button">首页</a>
            </div>
            <div class="bar-right">
            <a href="#" class="bar-button icon-cart">购物车</a>
            <a href="#" class="bar-button border icon-user2">登陆</a>
            <a href="#" class="bar-button icon-pencil">注册</a>
            </div>
        </div>
    </div>
    <div class="top1">
        <div class="nav-bar">
            <div class="nav-left">
                <h1 class="name" href="#">小猫水果</h1>
            </div>
            <div class="nav-right">
                <i class="icon-pacman"></i>
                <a href="#" class="nav-button first">全部商品</a>
                <a href="#" class="nav-button">热销商品</a>
                <a href="#" class="nav-button">新品上市</a>
                <a href="#" class="nav-button">店铺介绍</a>
                <a href="#" class="nav-button">帮助</a>
            </div>
        </div>
    </div>

    <div class="picwall">
        <div class="box">
            <div class="box-left"></div>
            <div class="box-right">
                <img class="pic-img" src="images/show1.jpg">
            </div>
        </div>
    </div>
































    <div class="navbar">
        <div class="item">按键1</div>
        <div class="item">按键2</div>
        <div class="item">按键3</div>
        <div class="item">按键4</div>
        <div class="help">按键5</div>
    </div>


  
/*<style type="text/css">
    .miaobian{

   -webkit-text-stroke:1px #f00;
   text-stroke:1px #f00;

</style>
    <div class="miaobian">我去</div>
*/

        <style type="text/css">
            .item{
                width: 170px;
                height: auto;
                margin-top: 3px;   
            }
            .commodity{
                margin-top: 10px;
                width:180px;
                height: auto;
                padding: 5px;
                font-size: 13px;
                /*background-color: #aaaaaa;*/
                box-shadow: 3px 3px 3px 3px #aaa;
                font-family: 'Arial';
                overflow: hidden;
            }
            .commodityImg{
                width:170px;
                height:170px;
                position: relative;
                overflow: hidden;
            }
            .eachChild{
                width:100%;
                height:100%;
                position: relative;
                white-space:nowrap;
            }
            .hidden{
                height: 0;
                width: 0;
            }
            .hide-img{
                width: 0;
                height: 0;
            }
            img{
                height: 100%;
                display: inline-block;
                /*float: left;*/
                position: relative;
            }
            img:hover{
                .commodity{
                    overflow: auto;
                }
            }
        </style>
         {{#> "main-goods-test","main-goods-test",true,({
            "src":"images/roll1.jpg",
            "src2":"images/roll2.jpg",
            "name":"家具嘛",
            "price":"115",
            "count":"11"
        })}}


       <!--  {{#> "pictureWall","pictureWall",true,({
        "imgs":[
            {"src":"images/pictureWall1.jpg"},
            {"src":"images/pictureWall2.jpg"},
            {"src":"images/pictureWall3.jpg"},
            {"src":"images/pictureWall4.jpg"},
            {"src":"images/pictureWall5.jpg"},
            {"src":"images/pictureWall5.jpg"}
        ],
        "lis":[
            {"liTitle":"1"},
            {"liTitle":"2"},
            {"liTitle":"3"},
            {"liTitle":"4"},
            {"liTitle":"5"}
        ]
        })}} -->




        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        {{#> "text","text",true,({
        "class":"titleinput",
        "title":"hehe"
        })}}

<!--         {{#> "commodity","commodity",true,({
        "class":"commodity",
        "imgs":[
            {"src":"images/commodity/nokiax1.jpg"},
            {"src":"images/commodity/nokiax2.jpg"},
            {"src":"images/commodity/nokiax3.jpg"},
            {"src":"images/commodity/nokiax4.jpg"},
            {"src":"images/commodity/nokiax5.jpg"}
        ],
        "price":"￥599", 
        "outline":"Nokia X 快速加载海量安卓应用trytytryrtyrtyrtyrty", 
        "store":"Nokia专营店" 
        })}} -->
    </xmp>


    <table class="table">
        <tbody>
            <thead>
                <td>title1</td>
                <td>title2</td>
                <td>title3</td>
            </thead>
            <tr>
                <td>hehe</td>
                <td>haha</td>
                <td>aa</td>
            </tr>
             <tr>
                <td>hehe</td>
                <td>haha</td>
                <td>aa</td>
            </tr>
            <tfoot>
                <td>hehe</td>
                <td>haha</td>
                <td>aa</td>
            </tfoot>
        </tbody>
    </table>


    <div class="image tile">
        <img src="images/roll1.jpg">
        <span>first picture 第一张图</span>
    </div>

     <div class="image tile">
        <img src="images/roll2.jpg">
        <span>second picture 第二张图</span>
    </div>
    
    
    <input type="text" />
    
    
    <div id="first">dfsdfsdf</div>
    <button class="button">default</button>
    <input class="button" type="button" value="default" />
    <br/>
    <div class="tool-bar">
        <div class="tool-group">
            <i class="icon-home"></i>
            <i class="icon-office"></i>
            <i class="icon-newspaper"></i>
            <i class="icon-pencil"></i>
            <i class="icon-quill"></i>
            <i class="icon-droplet"></i>
            <i class="icon-image"></i>
            <i class="icon-images"></i>
            <i class="icon-camera"></i>
            <i class="icon-headphones"></i>
        </div>
        <div class="tool-group">
            <i class="icon-film"></i>
            <i class="icon-pacman"></i>
            <i class="icon-connection"></i>
            <i class="icon-file"></i>
            <i class="icon-folder-open"></i>
            <i class="icon-tag"></i>
            <i class="icon-barcode"></i>
            <i class="icon-qrcode"></i>
            <i class="icon-cart"></i>
            <i class="icon-cart2"></i>
        </div>
        <div class="tool-group">
            <i class="icon-credit"></i>
            <i class="icon-phone"></i>
            <i class="icon-address-book"></i>
            <i class="icon-envelope"></i>
            <i class="icon-location"></i>
            <i class="icon-map"></i>
            <i class="icon-alarm"></i>
            <i class="icon-calendar"></i>
            <i class="icon-keyboard"></i>
        </div>
        <div style="clear:both;width:0"></div>
    </div>
    <div>
        <div>
            <i class="icon-mobile"></i>
            <i class="icon-disk"></i>
            <i class="icon-bubbles"></i>
            <i class="icon-user"></i>
            <i class="icon-user2"></i>
            <i class="icon-user3"></i>
            <i class="icon-zoomin"></i>
            <i class="icon-zoomout"></i>
            <i class="icon-lock"></i>
        </div>
        <div>
            <i class="icon-unlocked"></i>
            <i class="icon-cog"></i>
            <i class="icon-stats"></i>
            <i class="icon-bars"></i>
            <i class="icon-gift"></i>
            <i class="icon-cloud"></i>
            <i class="icon-thumbs-up"></i>
            <i class="icon-happy"></i>
            <i class="icon-smiley"></i>
        </div>
        <div>
            <i class="icon-tongue"></i>
            <i class="icon-sad"></i>
            <i class="icon-wink"></i>
            <i class="icon-grin"></i>
            <i class="icon-cool"></i>
            <i class="icon-angry"></i>
            <i class="icon-evil"></i>
            <i class="icon-shocked"></i>
            <i class="icon-confused"></i>
        </div>
        <div>
            <i class="icon-neutral"></i>
            <i class="icon-wondering"></i>
            <i class="icon-checkmark"></i>
            <i class="icon-volume-medium"></i>
            <i class="icon-arrow-up-left"></i>
            <i class="icon-arrow-up"></i>
            <i class="icon-arrow-up-right"></i>
            <i class="icon-arrow-right"></i>
            <i class="icon-arrow-down-right"></i>
        </div>
        <div>
            <i class="icon-arrow-down"></i>
            <i class="icon-arrow-down-left"></i>
            <i class="icon-arrow-left"></i>
            <i class="icon-html5"></i>
            <i class="icon-chrome"></i>
            <i class="icon-firefox"></i>
            <i class="icon-IE"></i>
            <i class="icon-opera"></i>
            <i class="icon-out"></i>
        </div>
        <div>
            <i class="icon-in"></i>
        </div>
    </div>
    <div>
        <div class="bg-black fg-white">hehe</div>
        <div class="icon-in bg-green"></div>
    </div>



    <div>
        <div class="tool-group">
            <span>1</span>
            <span>a</span>
        </div>
        <div class="tool-group">
            <span>2</span>
            <span>a</span>
        </div>
        <div class="tool-group">
            <span>3</span>
            <span>a</span>
        </div>
        <div class="tool-group">
            <span>4</span>
            <span>a</span>
        </div>
        <div class="tool-group">
            <span>5</span>
            <span>a</span>
        </div>
        <div class="tool-group">
            <span>6</span>
            <span>a</span>
        </div>
        <div style="clear:both"></div>
    </div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    

    <div class="VerticalGradient"></div>
    <div class="bg-green BgTransparent" width="100px;" height="50px;"></div>


            <main-goods
                src = "{{goods_list.0.preview_img_url}}?imageView/1/w/264/h/264"
                width="100%"
                top="-66px"
                text="{{goods_list.0.goods_name}}"
                href="/goods-details.html?id={{goods_list.0._id}}"
            >
            </main-goods>


   




</body>

</html>
